<template>
  <view class="wh_750 pageHeight bg_F5F5F5 flex flex-column align-center">
    <s-header-title is-fixed title="世系表模式" is-display-back background="#FFFFFF"
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height: state.pageHeight + 'px'}"></view>
    <view class="flex-sub wh_750" style="position: relative">
      <scroll-view :scroll-y="true"
                   style="position: absolute;width: 100%;height: 100%;top: 0;left: 0"
      >
        <view style="display: grid;grid-template-columns: repeat(3,1fr);grid-column-gap: 20rpx;padding: 20rpx 0"
              class="ml_20 mr_20"
        >
          <view v-for="(item,index) in state.modeList"
                :key="index"
                class="flex align-center justify-center"
                @click.stop="selectMode(index)"
                :style="{
                  border:state.modeIndex == index ? '2rpx solid #FF4206' : '2rpx solid transparent'
                }"
                style="overflow: hidden"
          >
            <image :src="`${IMG_URL}/index/${item.image}.png`" mode="widthFix"></image>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="flex flex-column bg_FFFFFF wh_750"
          style="position: fixed;bottom: 0;padding: 20rpx 0 50rpx 0">
      <view class="flex align-center justify-center">
        <view class="fs_32 color_FFFFFF bg_FF4206 fw_500"
              style="border-radius: 16rpx;padding: 10rpx 50rpx"
              @click="getGenealogicalInformation()"
        >
          导出
        </view>
      </view>
    </view>
    <canvas canvas-id="myCanvas"
            :style="{
      width: `${375 * viewScale}px`,
      height:  `${667 * viewScale}px`
            }"
            style="position: fixed;top: -99999999999999999999px;left: -99999999999999999999px;transform: translate(0,0);z-index:9999999999;"
    ></canvas>
    <!-- #ifdef APP-PLUS -->
    <pdfManage :imageList="page.imageList"></pdfManage>
    <!-- #endif -->
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import sheep from '@/sheep';
  import permision from '@/uni_modules/all-speech/js_sdk/wa-permission/permission';
  import dayjs from 'dayjs';
  import { pathToBase64 } from 'image-tools';
  // #ifdef H5
  import { jsPDF } from 'jspdf';
  // #endif
  import pdfManage from './components/pdfManage.vue';

  const state = reactive({
    options: {},
    pageHeight: 0,
    modeList: [
      {
        name: '3行',
        image: 'threeRows',
        value: 3,
      },
      {
        name: '6行',
        image: 'sixRows',
        value: 12,
      },
    ],
    modeIndex: 0,
  });
  const page = reactive({
    genealogicalInformation: {},
    imageList: [],
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const viewScale = computed(() => {
    // #ifdef H5
    return state.modeIndex == 0 ? 2 : 4;
    // #endif
    // #ifndef H5
    return state.modeIndex == 0 ? 2 : 2;
    // #endif
  });

  onLoad((options) => {
    state.options = options;
    // getGenealogicalInformation();
  });

  // #ifdef H5
  function isWechat() {
    const ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/micromessenger/i) == 'micromessenger') {
      return true;
    } else {
      return false;
    }
  }

  // #endif

  // 获取册谱详情
  async function getGenealogicalInformation() {
    //判断是否在微信中
    // #ifdef H5
    let flag = isWechat();
    if (flag) {
      uni.showModal({
        title: '提示',
        content: '微信浏览器暂不支持,请点击右上角...,选择在浏览器中打开',
      });
      return;
    }
    // #endif
    const {
      data,
    } = await sheep.$api.book_list.getUnreadMessage({
      genealogy_id: state.options.genealogy_id,
      seniorityRow: state.modeList[state.modeIndex].value,
      import: 1,
    });
    page.imageList = [];
    page.genealogicalInformation = data;
    await derive(0);
  }

  function getPageHeight(height) {
    state.pageHeight = height;
  }

  function selectMode(index) {
    state.modeIndex = index;
  }

  const ctx = reactive({
    value: null,
  });

  async function derive(index = 0) {
    // #ifdef MP-WEIXIN
    uni.showModal({
      title: '提示',
      content: '请在拾亲App端、PC端或H5端使用导出功能(拾亲小程序端受限，暂不支持导出功能)。',
    });
    // #endif
    // #ifdef APP-PLUS
    let platform = uni.getSystemInfoSync().platform;
    if (platform == 'android') {
      uni.showModal({
        title: '提示',
        content: '需要您开启储存权限，才能导出并下载PDF',
        success: async (res) => {
          if (res.confirm) {
            const limitsOfAuthority = await permision.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');
            if (limitsOfAuthority == 1) {
              ctx.value = uni.createCanvasContext('myCanvas');
              await drawImage(index);
            } else {
              sheep.$helper.toast('请开启储存权限');
              setTimeout(() => {
                permision.gotoAppPermissionSetting();
              }, 1500);
            }
          }
        },
      });
    } else {
      ctx.value = uni.createCanvasContext('myCanvas');
      await drawImage(index);
    }
    // #endif
    // #ifdef H5
    ctx.value = uni.createCanvasContext('myCanvas');
    await drawImage(index);
    // #endif
  }
  const PDF = reactive({
    value:null
  })
  async function drawImage(index = 0) {

    uni.showLoading({
      title: `正在绘制第${index}张照片`,
      mask: true,
    });
    if (index == 0) {
      PDF.value = new jsPDF('p', 'cm', [22.225 * 2, 30.163 * 2], true);
      // 绘制背景
      await drawBackground();
      let coverImage = await getImageInfo({
        imgSrc: page.genealogicalInformation.cover_image_url.indexOf('http') != -1 ? page.genealogicalInformation.cover_image_url : `${nc_image.value}${page.genealogicalInformation.cover_image_url}`,
      });

      await ctx.value.drawImage(coverImage.path, 0, 0, 375 * viewScale.value, 667 * viewScale.value);
      await ctx.value.save();
      await drawRect(128 * viewScale.value, 96 * viewScale.value, 192 * viewScale.value, 445 * viewScale.value, '#FFFFFF');
      await drawRoundRectPath(138 * viewScale.value, 106 * viewScale.value, 172 * viewScale.value, 425 * viewScale.value, 2 * viewScale.value, '#000000', '#FFFFFF');
      await drawRoundRectPath(143 * viewScale.value, 111 * viewScale.value, 32 * viewScale.value, 326 * viewScale.value, 1 * viewScale.value, '#000000', '#FFFFFF');
      await drawRoundRectPath(178 * viewScale.value, 111 * viewScale.value, 92 * viewScale.value, 326 * viewScale.value, 1 * viewScale.value, '#000000', '#FFFFFF');
      await drawRoundRectPath(273 * viewScale.value, 111 * viewScale.value, 32 * viewScale.value, 326 * viewScale.value, 1 * viewScale.value, '#000000', '#FFFFFF');
      await drawRoundRectPath(143 * viewScale.value, 440 * viewScale.value, 162 * viewScale.value, 85 * viewScale.value, 1 * viewScale.value, '#000000', '#FFFFFF');
      await drawText(page.genealogicalInformation.hall_num, 158 * viewScale.value, 128 * viewScale.value, 13 * viewScale.value, 85 * viewScale.value, '#42403C', 13 * viewScale.value, '500', 'center');
      await drawTextVertical(`主编人·${page.genealogicalInformation.editor}`, 158 * viewScale.value, 430 * viewScale.value, 13 * viewScale.value, 85 * viewScale.value, '#42403C', 13 * viewScale.value,
        '500', 'center');
      await drawTextCenter(`${page.genealogicalInformation.title}`, 225 * viewScale.value, 161 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#42403C', (52 * viewScale.value).toFixed(0), '500',
        'center');
      await drawTextVertical(`创建日期·${number2Chinese(page.genealogicalInformation.full_year.gregorian_date)}`,
        290 * viewScale.value, 430 * viewScale.value, 13 * viewScale.value, 85 * viewScale.value, '#42403C', 13 * viewScale.value, '500', 'center');
      let backgroundImage = await getImageInfo({
        imgSrc: `${sheep.$store('AI').sq_image_path}/index/canonization_cover_background.png`,
      });
      await ctx.value.drawImage(backgroundImage.path, 145 * viewScale.value, 442 * viewScale.value, 160 * viewScale.value, 83 * viewScale.value);
      ctx.value.draw(true, async () => {
        // 保存图片
        let {
          fullurl,
        } = await saveImage();
        // page.imageList.push(fullurl);
        await createPdf(fullurl);
        await drawImage(index + 1);
      });
    } else {
      let num = userInfo.value.is_import != 0 ? page.genealogicalInformation.totalPages : (page.genealogicalInformation.totalPages < 30 ? page.genealogicalInformation.totalPages : 30);
      if (index <= num) {
        if (index % 2 == 0) {
          await drawBackground();
          await drawRoundRectPath(7 * viewScale.value, 66.5 * viewScale.value, 360 * viewScale.value, 534 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
          await drawRoundRectPath(10 * viewScale.value, 69.5 * viewScale.value, 354 * viewScale.value, 528 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
          await drawRect(48 * viewScale.value, 68.5 * viewScale.value, 2 * viewScale.value, 530 * viewScale.value, '#000000');
          await drawText(page.genealogicalInformation.title, 28 * viewScale.value, 125 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', setFontSize(page
            .genealogicalInformation.title).toFixed(0), '500', 'center');
          await drawRect(10 * viewScale.value, 300 * viewScale.value, 38 * viewScale.value, 8 * viewScale.value, '#000000');
          // await drawRect(326, 307, 38, 8, '#000000');
          await drawTriangle(10 * viewScale.value, 308 * viewScale.value, 38 * viewScale.value, 10 * viewScale.value, '#000000');
          await drawText(page.genealogicalInformation.branch, 28 * viewScale.value, 345 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', setFontSize(page
            .genealogicalInformation.branch).toFixed(0), '500', 'center');
          await drawRect(10 * viewScale.value, 400 * viewScale.value, 38 * viewScale.value, 10 * viewScale.value, '#000000');
          // await drawRect(326, 407, 38, 8, '#000000');
          await drawText(page.genealogicalInformation.hall_num, 28 * viewScale.value, 445 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', setFontSize(page
            .genealogicalInformation.hall_num).toFixed(0), '500', 'center');
          await drawRect(10 * viewScale.value, 500 * viewScale.value, 38 * viewScale.value, 10 * viewScale.value, '#000000');
          // await drawRect(326, 507, 38, 8, '#000000');
          let {
            data,
          } = await sheep.$api.book_list.getBookPage({
            genealogy_id: state.options.genealogy_id,
            page: index,
            seniorityRow: state.modeList[state.modeIndex].value,
            import: 1,
          });
          await drawTextLandscapeOrientation(data.page, 28 * viewScale.value, 562 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 15 * viewScale.value, '500', 'center');
          if (data.sys_id != 2 && data.sys_id != 3) {
            // let jiapu_background_bg = await getImageInfo({
            //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/jiapu_background_bg.png`,
            // });
            // await ctx.value.drawImage(jiapu_background_bg.path, 128, 75, 116, 27);
            await drawTextLandscapeOrientation(`${data.cate_title}`, 204.5 * viewScale.value, 95 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 15 * viewScale.value,
              '500', 'center');
          }
          // 目录
          if (data.desc == 1 && data.sys_id == 0) {
            data.content.forEach((item, index) => {
              // -item.title.length * 13 - item.page.toString().length * 13;
              drawHorizontalLine(60 * viewScale.value, (128 + index * 28) * viewScale.value, 280 * viewScale.value, 0 * viewScale.value, '#000000', 0.6 * viewScale.value, 4 * viewScale.value, 6 * viewScale.value);
              drawRect(60 * viewScale.value, (123 + index * 28) * viewScale.value, (2 + item.title.length * 13) * viewScale.value, 10 * viewScale.value, '#FFFFFF');
              drawTextLandscapeOrientation(item.title, 60 * viewScale.value, (132 + index * 28) * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000',
                13 * viewScale.value, '500', 'left');
              drawRect((350 - item.page.toString().length * 8) * viewScale.value, (123 + index * 28) * viewScale.value, (2 + item.page.toString().length * 8) * viewScale.value, 10 * viewScale.value, '#FFFFFF');
              drawTextLandscapeOrientation(item.page, 350 * viewScale.value, (132 + index * 28) * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000',
                13 * viewScale.value, '500', 'right');
            });
          }
          // 索引
          if (data.desc == 'cate' && data.sys_id == 1) {
            await drawRect(153.5 * viewScale.value, 115.5 * viewScale.value, 2 * viewScale.value, 460 * viewScale.value, '#BF8257');
            await drawRect(257.5 * viewScale.value, 115.5 * viewScale.value, 2 * viewScale.value, 460 * viewScale.value, '#BF8257');
            data.content.forEach((item, index) => {
              if ((index + 1) / 21 <= 1) {
                if (item.desc == 'title') {
                  drawRect(53 * viewScale.value, (115.5 + index * 22) * viewScale.value, 98 * viewScale.value, 20 * viewScale.value, '#FF4206');
                  drawTextItem(item.title, 102 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#FFFFFF', 13 * viewScale.value, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 53 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                  drawTextItem(item.page, 151 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 53 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                  drawTextItem(item.page, 151 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 2) {
                if (item.desc == 'title') {
                  drawRect(157 * viewScale.value, (115.5 + (index - 21) * 22) * viewScale.value, 98 * viewScale.value, 20 * viewScale.value, '#FF4206');
                  drawTextItem(item.title, 206 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#FFFFFF', 13 * viewScale.value, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 157 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 255 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 157 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 255 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 3) {
                if (item.desc == 'title') {
                  drawRect(262 * viewScale.value, (115.5 + (index - 42) * 22) * viewScale.value, 98 * viewScale.value, 20 * viewScale.value, '#FF4206');
                  drawTextItem(item.title, 311 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#FFFFFF', 13 * viewScale.value, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 262 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 360 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 262 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 360 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
              }
            });
          }
          // 照片墙栏目
          if (data.desc == 'cate' && data.sys_id == 2) {
            await drawRectangle(175 * viewScale.value, 200 * viewScale.value, 76 * viewScale.value, 10 * viewScale.value, '#000000', 5 * viewScale.value);
            await drawRoundRectPath(175 * viewScale.value, 215 * viewScale.value, 76 * viewScale.value, 158 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
            await drawText('照片墙', 215 * viewScale.value, 270 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 33 * viewScale.value, '500', 'center');
          }
          // 世系表栏目
          if (data.desc == 'cate' && data.sys_id == 3) {
            await drawRectangle(175 * viewScale.value, 200 * viewScale.value, 76 * viewScale.value, 10 * viewScale.value, '#000000', 5 * viewScale.value);
            await drawRoundRectPath(175 * viewScale.value, 215 * viewScale.value, 76 * viewScale.value, 158 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
            await drawText('世系表', 215 * viewScale.value, 270 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 33 * viewScale.value, '500', 'center');
          }
          // 照片墙
          if (data.desc == 'content' && data.sys_id == 2) {
            if (data.type == 1) {
              for (let index = 0; index < data.content.length; index++) {
                if ((index + 1) / 3 <= 1) {
                  await drawRect((65 + index * 96) * viewScale.value, 110 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (65 + index * 96) * viewScale.value, (110 + (111 - (res.height / res
                      .width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (65 + (index) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 110 * viewScale.value, ((res.width / res.height) * 111) * viewScale.value, 111 * viewScale.value);
                  }
                }
                if ((index + 1) / 3 > 1 && (index + 1) / 3 <= 2) {
                  await drawRect((65 + (index - 3) * 96) * viewScale.value, 225 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (65 + (index - 3) * 96) * viewScale.value, (225 + (111 - (res
                      .height / res.width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (65 + (index - 3) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 225 * viewScale.value, ((res.width / res.height) * 111) * viewScale.value, 111 * viewScale.value);
                  }
                }
                if ((index + 1) / 3 > 2 && (index + 1) / 3 <= 3) {
                  await drawRect((65 + (index - 6) * 96) * viewScale.value, 340 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (65 + (index - 6) * 96) * viewScale.value, (340 + (111 - (res
                      .height / res.width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (65 + (index - 6) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 340 * viewScale.value, ((res.width / res.height) * 111) * viewScale.value, 111 * viewScale.value);
                  }
                }
                if ((index + 1) / 3 > 3 && (index + 1) / 3 <= 4) {
                  await drawRect((65 + (index - 9) * 96) * viewScale.value, 455 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (65 + (index - 9) * 96) * viewScale.value, (455 + (111 - (res
                      .height / res.width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (65 + (index - 9) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 455 * viewScale.value, ((res.width / res.height) * 111) * viewScale.value, 111 * viewScale.value);
                  }
                }
              }
            } else {
              for (let index = 0; index < data.content.length; index++) {
                await drawRect(65 * viewScale.value, 95 * viewScale.value, 280 * viewScale.value, 470 * viewScale.value, 'rgba(255,255,255,1)');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                    .image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width >= res.height) {
                  await ctx.value.drawImage(res.path, 65 * viewScale.value, (95 + (470 - (res.height / res.width) * 280) /
                    2) * viewScale.value, 280 * viewScale.value, ((res.height / res.width) * 280) * viewScale.value);
                } else {
                  let scale = 667 / 375;
                  await ctx.value.drawImage(res.path, (65 + (280 - (res.width / res.height) * 470) / 2) * viewScale.value,
                    95 * viewScale.value, ((res.width / res.height) * 470) * viewScale.value, 470 * viewScale.value);
                }
              }
            }
          }
          // 世系表
          if (data.desc == 'content' && data.sys_id == 3) {
            let position = 0;
            for (let index = 0; index < data.content.length; index++) {
              if (state.modeIndex == 0) {
                // 每一栏的边框
                await drawRoundRectPath(53 * viewScale.value, (74 + index * 175) * viewScale.value, 307 * viewScale.value, 170 * viewScale.value, 2 * viewScale.value, '#696969', 'transparent');
                await drawLine(119 * viewScale.value, (74 + index * 175) * viewScale.value, 1 * viewScale.value, 135 * viewScale.value, '#696969');
                await drawLine(204 * viewScale.value, (74 + index * 175) * viewScale.value, 1 * viewScale.value, 135 * viewScale.value, '#696969');
                await drawLine(289 * viewScale.value, (74 + index * 175) * viewScale.value, 1 * viewScale.value, 170 * viewScale.value, '#696969');
                await drawLine(53 * viewScale.value, (209 + index * 175) * viewScale.value, 236 * viewScale.value, 1 * viewScale.value, '#696969');
                await drawLine(119 * viewScale.value, (94 + index * 175) * viewScale.value, 240 * viewScale.value, 1 * viewScale.value, '#696969');
                await drawLine(119 * viewScale.value, (114 + index * 175) * viewScale.value, 170 * viewScale.value, 1 * viewScale.value, '#696969');
                await drawLine(53 * viewScale.value, (168 + index * 175) * viewScale.value, 67 * viewScale.value, 1 * viewScale.value, '#696969');
                await drawLine(289 * viewScale.value, (126 + index * 175) * viewScale.value, 70 * viewScale.value, 1 * viewScale.value, '#696969');
                await drawLine(289 * viewScale.value, (145 + index * 175) * viewScale.value, 70 * viewScale.value, 1 * viewScale.value, '#696969');
                await drawLine(53 * viewScale.value, (188 + index * 175) * viewScale.value, 236 * viewScale.value, 1 * viewScale.value, '#696969');

                // 字辈
                await drawTextHeight(data.content[index].shi_cn, (36 + 39) * viewScale.value, (60 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                  15 * viewScale.value, '500', 'center');
                await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, (55 + 39) * viewScale.value, (60 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                  '#000000', 15 * viewScale.value, '500', 'center');
                // 姓名
                await drawTextLandscapeOrientation('姓名', (124 + 39) * viewScale.value, (90 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                // 配偶
                await drawTextLandscapeOrientation('配偶', (209 + 39) * viewScale.value, (90 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                // 父母
                await drawTextLandscapeOrientation('父母', (287 + 39) * viewScale.value, (90 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                  await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                    .content[index].parents[index1].name, (252 + 39) * viewScale.value, (107 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                  await drawTextLandscapeOrientation(data.content[index].parents[index1].page,
                    (318 + 39) * viewScale.value, (107 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'right');
                }
                // 子女
                await drawTextLandscapeOrientation('子女', (287 + 39) * viewScale.value, (141 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                // 本人子女
                if (data.content[index].children.length <= 6) {
                  for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                    console.log(data.content[index].children[index1]);
                    await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                      .content[index].children[index1].name, (252 + 39) * viewScale.value, (161.5 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                    await drawTextLandscapeOrientation(data
                      .content[index].children[index1].page, (318 + 39) * viewScale.value, (161.5 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'right');
                  }
                } else {
                  for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                    if (index1 < 5) {
                      await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                        .content[index].children[index1].name, (252 + 39) * viewScale.value, (161 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                      await drawTextLandscapeOrientation(data
                        .content[index].children[index1].page, (318 + 39) * viewScale.value, (161.5 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'right');
                    }
                  }
                  await drawTextLandscapeOrientation('...', (287 + 39) * viewScale.value, (161 + index * 175 + 5 * 15) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'center');
                }
                // 本人生日
                await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                  .birthday).format('YYYY年MM月DD日') : '', (127 + 39) * viewScale.value, (197 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                  8 * viewScale.value, '500', 'center');
                // 本人生日(农历)
                await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                  .lunar_birthday : '', (127 + 39) * viewScale.value, (206 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value, '500', 'center');
                // 本人姓名
                await drawTextLandscapeOrientation(data.content[index].name || '', (124 + 39) * viewScale.value, (110 + index * 175) * viewScale.value, 184 * viewScale.value,
                  150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'center');
                // 配偶姓名
                await drawTextLandscapeOrientation(data.content[index].qz_name || '', (209 + 39) * viewScale.value, (110 + index * 175) * viewScale.value,
                  184 * viewScale.value, 150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'center');
                // 配偶生日
                await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                    index].qz_birthday).format('YYYY年MM月DD日') : '', (208 + 39) * viewScale.value, (197 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                  '#000000', 8 * viewScale.value, '500', 'center');
                // 配偶生日(农历)
                await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                    index].qz_lunar_birthday : '', (208 + 39) * viewScale.value, (206 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value,
                  '500', 'center');
                // 兄弟
                await drawTextLandscapeOrientation(data.content[index].brother_desc || '', (46 + 39) * viewScale.value, (182 + index *
                  175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value, '500', 'center');
                // 排行
                await drawTextLandscapeOrientation(data.content[index].level_desc || '', (46 + 39) * viewScale.value, (202 + index * 175) * viewScale.value,
                  184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value, '500', 'center');
                // 备注
                if (!!data.content[index].remark) {
                  // let text = data.content[index].remark.split('\n');
                  let nextStart = (220 + index * 175) * viewScale.value;
                  // text.forEach(item => {
                  nextStart = fillFeedText({
                    text: data.content[index].remark,
                    x: (18 + 39) * viewScale.value,
                    y: nextStart,
                    maxWidth: 225 * viewScale.value,
                    lineHeight: 10 * viewScale.value,
                    color: '#000000',
                    size: 8 * viewScale.value,
                    maxLineNumber: 3,
                    isMax: true,
                  });
                  // });
                }
                // 本人照片
                if (data.content[index].image) {
                  let imageInPerson = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                      .image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (imageInPerson.width > imageInPerson.height) {
                    let scale = imageInPerson.width / imageInPerson.height;
                    await ctx.value.drawImage(imageInPerson.path, (83 + 39 + (80 - 68 / scale) / 2) * viewScale.value, (118 +
                      index * 175) * viewScale.value, 68 / scale * viewScale.value, 68 * viewScale.value);
                  } else {
                    let scale = imageInPerson.height / imageInPerson.width;
                    // drawRect(83, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, (83 + 39 + (80 - 68 / scale) / 2) * viewScale.value, (118 +
                      index * 175) * viewScale.value, 68 / scale * viewScale.value, 68 * viewScale.value);
                  }
                }
                // 配偶照片
                if (data.content[index].qz_image) {
                  let imageInPerson = await getImageInfo({
                    imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                      index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                  });
                  console.log(imageInPerson);
                  if (imageInPerson.width > imageInPerson.height) {
                    let scale = imageInPerson.width / imageInPerson.height;
                    // drawRect(168, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, (168 + 39) * viewScale.value, (118 + (68 - 80 / scale) / 2 +
                      index * 175) * viewScale.value, 80 * viewScale.value, 80 / scale * viewScale.value);
                  } else {
                    let scale = imageInPerson.height / imageInPerson.width;
                    // drawRect(168, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, (168 + 39 + (89 - 68 / scale) / 2) * viewScale.value, (118 +
                      index * 175) * viewScale.value, (68 / scale) * viewScale.value, 68 * viewScale.value);
                  }
                }
              } else {
                if (index % 2 == 0) {
                  await drawRoundRectPath(54 * viewScale.value, (74 + position * 87) * viewScale.value, 307 * 0.49 * viewScale.value, 84 * viewScale.value, 2 * viewScale.value, '#696969', 'transparent');
                  await drawLine(80 * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#696969');
                  await drawLine(122.5 * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#696969');
                  await drawLine(165 * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 85 * viewScale.value, '#696969');
                  await drawLine(80 * viewScale.value, (84 + position * 87) * viewScale.value, 124 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine(54 * viewScale.value, (140.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine(80 * viewScale.value, (94 + position * 87) * viewScale.value, 86 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine(54 * viewScale.value, (130.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine(54 * viewScale.value, (120.5 + position * 87) * viewScale.value, 27 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine(166 * viewScale.value, (102.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine(166 * viewScale.value, (112.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#696969');

                  // 字辈
                  await drawTextHeight(data.content[index].shi_cn, 63 * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    6 * viewScale.value, '500', 'center');
                  await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, 70 * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 6 * viewScale.value, '500', 'center');
                  // 姓名
                  await drawTextLandscapeOrientation('姓名', 102 * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 配偶
                  await drawTextLandscapeOrientation('配偶', 145 * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  await drawTextLandscapeOrientation('父母', 185 * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                      .content[index].parents[index1].name, 167 * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].page,
                      202 * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                  }
                  // 子女
                  await drawTextLandscapeOrientation('子女', 185 * viewScale.value, (110 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');

                  // 本人子女
                  if (data.content[index].children.length <= 6) {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                        .content[index].children[index1].name, 167 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                      await drawTextLandscapeOrientation(data.content[index].children[index1].page, 202 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                    }
                  } else {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      if (index1 < 5) {
                        await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                          .content[index].children[index1].name, 167 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                        await drawTextLandscapeOrientation(data.content[index].children[index1].page, 202 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                      }
                    }
                    await drawTextLandscapeOrientation('...', 184 * viewScale.value, (119.5 + position * 175 + 5 * 7) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  }

                  // 本人生日
                  await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                    .birthday).format('YYYY年MM月DD日') : '', 102 * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    4 * viewScale.value, '500', 'center');

                  // 本人生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                    .lunar_birthday : '', 102 * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 本人姓名
                  await drawTextLandscapeOrientation(data.content[index].name || '', 102 * viewScale.value, (92 + position * 87) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶姓名
                  await drawTextLandscapeOrientation(data.content[index].qz_name || '', 145 * viewScale.value, (92 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶生日
                  await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                      index].qz_birthday).format('YYYY年MM月DD日') : '', 145 * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 4 * viewScale.value, '500', 'center');
                  // 配偶生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                      index].qz_lunar_birthday : '', 145 * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value,
                    '500', 'center');
                  // 兄弟
                  await drawTextLandscapeOrientation(data.content[index].brother_desc || '', 67 * viewScale.value, (127.5 + position *
                    87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 排行
                  await drawTextLandscapeOrientation(data.content[index].level_desc || '', 67 * viewScale.value, (137.5 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 备注
                  if (!!data.content[index].remark) {
                    // let text = data.content[index].remark.split('\n');
                    let nextStart = (145.5 + position * 87) * viewScale.value;
                    // text.forEach(item => {
                    nextStart = fillFeedText({
                      text: data.content[index].remark,
                      x: 56 * viewScale.value,
                      y: nextStart,
                      maxWidth: 107 * viewScale.value,
                      lineHeight: 5 * viewScale.value,
                      color: '#000000',
                      size: 4 * viewScale.value,
                      maxLineNumber: 3,
                      isMax: true,
                    });
                    // });
                  }
                  // 本人照片
                  if (data.content[index].image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                        .image : `${nc_image.value}${data.content[index].image}`,
                    });
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(41.8 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, 81.8 * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(83, 118 + position * 87, 80 * viewScale.value, 68 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, (81.8 + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }
                  // 配偶照片
                  if (data.content[index].qz_image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                        index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                    });
                    console.log(imageInPerson);
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(84.2 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, 124.2 * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(168, 118 + index * 175, 80, 68);
                      await ctx.value.drawImage(imageInPerson.path, (124.2 + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }
                } else {
                  await drawRoundRectPath((58 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 307 * 0.49 * viewScale.value, 84 * viewScale.value, 2 * viewScale.value, '#696969', 'transparent');
                  await drawLine((84 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#696969');
                  await drawLine((126.5 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#696969');
                  await drawLine((169 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 85 * viewScale.value, '#696969');
                  await drawLine((84 + 307 * 0.49) * viewScale.value, (84 + position * 87) * viewScale.value, 124 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine((58 + 307 * 0.49) * viewScale.value, (140.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine((84 + 307 * 0.49) * viewScale.value, (94 + position * 87) * viewScale.value, 86 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine((58 + 307 * 0.49) * viewScale.value, (130.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine((58 + 307 * 0.49) * viewScale.value, (120.5 + position * 87) * viewScale.value, 27 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine((170 + 307 * 0.49) * viewScale.value, (102.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#696969');
                  await drawLine((170 + 307 * 0.49) * viewScale.value, (112.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#696969');

                  // 字辈
                  await drawTextHeight(data.content[index].shi_cn, (67 + 307 * 0.49) * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    6 * viewScale.value, '500', 'center');
                  await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, (74 + 307 * 0.49) * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 6 * viewScale.value, '500', 'center');
                  // 姓名
                  await drawTextLandscapeOrientation('姓名', (106 + 307 * 0.49) * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 配偶
                  await drawTextLandscapeOrientation('配偶', (149 + 307 * 0.49) * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  await drawTextLandscapeOrientation('父母', (189 + 307 * 0.49) * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                      .content[index].parents[index1].name, (171 + 307 * 0.49) * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].page,
                      (206 + 307 * 0.49) * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                  }
                  // 子女
                  await drawTextLandscapeOrientation('子女', (189 + 307 * 0.49) * viewScale.value, (110 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 本人子女
                  if (data.content[index].children.length <= 6) {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                        .content[index].children[index1].name, (171 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                      await drawTextLandscapeOrientation(data.content[index].children[index1].page, (206 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                    }
                  } else {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      if (index1 < 5) {
                        await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                          .content[index].children[index1].name, (189 + 307 * 0.49) * viewScale.value, (119.5 + position * 175 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                      }
                    }
                    await drawTextLandscapeOrientation('...', (189 + 307 * 0.49) * viewScale.value, (119.5 + position * 175 + 5 * 7) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  }
                  // 本人生日
                  await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                    .birthday).format('YYYY年MM月DD日') : '', (106 + 307 * 0.49) * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    4 * viewScale.value, '500', 'center');
                  // 本人生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                    .lunar_birthday : '', (106 + 307 * 0.49) * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 本人姓名
                  await drawTextLandscapeOrientation(data.content[index].name || '', (106 + 307 * 0.49) * viewScale.value, (92 + position * 87) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶姓名
                  await drawTextLandscapeOrientation(data.content[index].qz_name || '', (149 + 307 * 0.49) * viewScale.value, (92 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶生日
                  await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                      index].qz_birthday).format('YYYY年MM月DD日') : '', (149 + 307 * 0.49) * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 4 * viewScale.value, '500', 'center');
                  // 配偶生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                      index].qz_lunar_birthday : '', (149 + 307 * 0.49) * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value,
                    '500', 'center');
                  // 兄弟
                  await drawTextLandscapeOrientation(data.content[index].brother_desc || '', (71 + 307 * 0.49) * viewScale.value, (127.5 + position *
                    87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 排行
                  await drawTextLandscapeOrientation(data.content[index].level_desc || '', (71 + 307 * 0.49) * viewScale.value, (137.5 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 备注
                  if (!!data.content[index].remark) {
                    // let text = data.content[index].remark.split('\n');
                    let nextStart = (145.5 + position * 87) * viewScale.value;
                    // text.forEach(item => {
                    nextStart = fillFeedText({
                      text: data.content[index].remark,
                      x: (60 + 307 * 0.49) * viewScale.value,
                      y: nextStart,
                      maxWidth: 107 * viewScale.value,
                      lineHeight: 5 * viewScale.value,
                      color: '#000000',
                      size: 4 * viewScale.value,
                      maxLineNumber: 3,
                      isMax: true,
                    });
                    // });
                  }

                  // 本人照片
                  if (data.content[index].image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                        .image : `${nc_image.value}${data.content[index].image}`,
                    });
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(41.8 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, (85.8 + 307 * 0.49) * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(83, 118 + position * 87, 80 * viewScale.value, 68 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, ((85.8 + 307 * 0.49) + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }

                  // 配偶照片
                  if (data.content[index].qz_image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                        index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                    });
                    console.log(imageInPerson);
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(84.2 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, (128.2 + 307 * 0.49) * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(168, 118 + index * 175, 80, 68);
                      await ctx.value.drawImage(imageInPerson.path, ((128.2 + 307 * 0.49) + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }
                  position++;
                }
              }
            }
          }
          // 其他文字内容
          if (data.desc == 'content' && data.sys_id != 2 && data.sys_id != 3) {
            // 分割字符转为数组
            let text = data.content.split('\n');
            let nextStart = 125 * viewScale.value;
            text.forEach(item => {
              nextStart = fillFeedText({
                text: item,
                x: 69 * viewScale.value,
                y: nextStart,
                maxWidth: 275 * viewScale.value,
                lineHeight: 23 * viewScale.value,
                color: '#000000',
                size: 13 * viewScale.value,
                isMax: false,
              });
            });
          }
          ctx.value.draw(true, async () => {
            let {
              fullurl,
            } = await saveImage();
            // page.imageList.push(fullurl);
            await createPdf(fullurl);
            await drawImage(index + 1);
          });
        } else {
          await drawBackground();
          await drawRoundRectPath(7 * viewScale.value, 66.5 * viewScale.value, 360 * viewScale.value, 534 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
          await drawRoundRectPath(10 * viewScale.value, 69.5 * viewScale.value, 354 * viewScale.value, 528 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
          await drawRect(325 * viewScale.value, 68.5 * viewScale.value, 2 * viewScale.value, 530 * viewScale.value, '#000000');
          await drawText(page.genealogicalInformation.title, 345 * viewScale.value, 125 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', setFontSize(page
            .genealogicalInformation.title).toFixed(0), '500', 'center');
          await drawRect(326 * viewScale.value, 300 * viewScale.value, 38 * viewScale.value, 8 * viewScale.value, '#000000');
          // await drawRect(326, 307, 38, 8, '#000000');
          await drawTriangle(326 * viewScale.value, 308 * viewScale.value, 38 * viewScale.value, 10 * viewScale.value, '#000000');
          await drawText(page.genealogicalInformation.branch, 345 * viewScale.value, 345 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', setFontSize(page
            .genealogicalInformation.branch).toFixed(0), '500', 'center');
          await drawRect(326 * viewScale.value, 400 * viewScale.value, 38 * viewScale.value, 10 * viewScale.value, '#000000');
          // await drawRect(326, 407, 38, 8, '#000000');
          await drawText(page.genealogicalInformation.hall_num, 345 * viewScale.value, 445 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', setFontSize(page
            .genealogicalInformation.hall_num).toFixed(0), '500', 'center');
          await drawRect(326 * viewScale.value, 500 * viewScale.value, 38 * viewScale.value, 10 * viewScale.value, '#000000');
          // await drawRect(326, 507, 38, 8, '#000000');
          let {
            data,
          } = await sheep.$api.book_list.getBookPage({
            genealogy_id: state.options.genealogy_id,
            page: index,
            seniorityRow: state.modeList[state.modeIndex].value,
            import: 1,
          });
          await drawTextLandscapeOrientation(data.page, 345 * viewScale.value, 562 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 15 * viewScale.value, '500', 'center');
          if (data.sys_id != 2 && data.sys_id != 3) {
            // let jiapu_background_bg = await getImageInfo({
            //   imgSrc: `${sheep.$store('AI').sq_image_path}/chineseSurname/jiapu_background_bg.png`,
            // });
            // await ctx.value.drawImage(jiapu_background_bg.path, 128, 75, 116, 27);
            await drawTextLandscapeOrientation(`${data.cate_title}`, 174.5 * viewScale.value, 95 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 15 * viewScale.value,
              '500', 'center');
          }
          if (data.desc == 1 && data.sys_id == 0) {
            data.content.forEach((item, index) => {
              // drawHorizontalLine(42, 128 + index * 28, 242 - item.title
              //   .length * 13, 0, '#000000', 1, 6, 6);
              drawHorizontalLine(28 * viewScale.value, (128 + index * 28) * viewScale.value, 280 * viewScale.value, 0 * viewScale.value, '#000000', 0.6 * viewScale.value, 4 * viewScale.value, 6 * viewScale.value);
              drawRect(28 * viewScale.value, (123 + index * 28) * viewScale.value, (2 + item.title.length * 13) * viewScale.value, 10 * viewScale.value, '#FFFFFF');
              drawTextLandscapeOrientation(item.title, 28 * viewScale.value, (132 + index * 28) * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000',
                13 * viewScale.value, '500', 'left');
              drawRect((308 - item.page.toString().length * 8) * viewScale.value, (123 + index * 28) * viewScale.value, (2 + item.page.toString().length * 8) * viewScale.value, 10 * viewScale.value, '#FFFFFF');
              drawTextLandscapeOrientation(item.page, 308 * viewScale.value, (132 + index * 28) * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000',
                13 * viewScale.value, '500', 'right');
            });
          }
          if (data.desc == 'cate' && data.sys_id == 1) {
            await drawRect(114 * viewScale.value, 115.5 * viewScale.value, 2 * viewScale.value, 455 * viewScale.value, '#BF8257');
            await drawRect(218 * viewScale.value, 115.5 * viewScale.value, 2 * viewScale.value, 455 * viewScale.value, '#BF8257');
            data.content.forEach((item, index) => {
              if ((index + 1) / 21 <= 1) {
                if (item.desc == 'title') {
                  drawRect(14 * viewScale.value, (115.5 + index * 22) * viewScale.value, 98 * viewScale.value, 20 * viewScale.value, '#FF4206');
                  drawTextItem(item.title, 63 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#FFFFFF', 13 * viewScale.value, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 14 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                  drawTextItem(item.page, 112 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 14 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                  drawTextItem(item.page, 112 * viewScale.value, (129.5 + index * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 2) {
                if (item.desc == 'title') {
                  drawRect(117.5 * viewScale.value, (115.5 + (index - 21) * 22) * viewScale.value, 98 * viewScale.value, 20 * viewScale.value, '#FF4206');
                  drawTextItem(item.title, 166.5 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#FFFFFF', 13 * viewScale.value, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 117.5 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 215.5 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 117.5 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 215.5 * viewScale.value, (129.5 + (index - 21) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
              } else if ((index + 1) / 21 <= 3) {
                if (item.desc == 'title') {
                  drawRect(222 * viewScale.value, (115.5 + (index - 42) * 22) * viewScale.value, 98 * viewScale.value, 20 * viewScale.value, '#FF4206');
                  drawTextItem(item.title, 271 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#FFFFFF', 13 * viewScale.value, '500',
                    'center');
                }
                if (item.desc == 'shi') {
                  drawTextItem(item.title, 222 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 320 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
                if (item.desc == 'people') {
                  drawTextItem(item.name, 222 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'left');
                  drawTextItem(item.page, 320 * viewScale.value, (129.5 + (index - 42) * 22) * viewScale.value, '#000000', 13 * viewScale.value, '500',
                    'right');
                }
              }
            });
          }
          if (data.desc == 'cate' && data.sys_id == 2) {
            await drawRectangle(130 * viewScale.value, 200 * viewScale.value, 76 * viewScale.value, 10 * viewScale.value, '#000000', 5 * viewScale.value);
            await drawRoundRectPath(130 * viewScale.value, 215 * viewScale.value, 76 * viewScale.value, 158 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
            await drawText('照片墙', 169 * viewScale.value, 270 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 33 * viewScale.value, '500', 'center');
          }
          if (data.desc == 'cate' && data.sys_id == 3) {
            await drawRectangle(130 * viewScale.value, 200 * viewScale.value, 76 * viewScale.value, 10 * viewScale.value, '#000000', 5 * viewScale.value);
            await drawRoundRectPath(130 * viewScale.value, 215 * viewScale.value, 76 * viewScale.value, 158 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
            await drawText('世系表', 169 * viewScale.value, 270 * viewScale.value, 13 * viewScale.value, 256 * viewScale.value, '#000000', 33 * viewScale.value, '500', 'center');
          }
          if (data.desc == 'content' && data.sys_id == 2) {
            if (data.type == 1) {
              for (let index = 0; index < data.content.length; index++) {
                if ((index + 1) / 3 <= 1) {
                  await drawRect((28 + index * 96) * viewScale.value, 110 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, '#FFFFFF');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  console.log(res.width, res.height);
                  if (res.width >= res.height) {
                    let scale = res.width / res.height;
                    await ctx.value.drawImage(res.path, (28 + index * 96) * viewScale.value, (110 + (111 - (res.height / res
                      .width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    let scale = res.width / res.height;
                    await ctx.value.drawImage(res.path, ((28 + index * 96) + ((92 - (res.width / res.height) * 111) / 2)) * viewScale.value, 110 * viewScale.value,
                      (res.width / res.height) * 111 * viewScale.value, 111 * viewScale.value);
                  }
                }
                if ((index + 1) / 3 > 1 && (index + 1) / 3 <= 2) {
                  await drawRect((28 + (index - 3) * 96) * viewScale.value, 225 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (28 + (index - 3) * 96) * viewScale.value, (225 + (111 - (res
                      .height / res.width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (28 + (index - 3) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 225 * viewScale.value, ((res.width / res.height) * 111) * viewScale.value, 111 * viewScale.value);
                  }
                }
                if ((index + 1) / 3 > 2 && (index + 1) / 3 <= 3) {
                  await drawRect((28 + (index - 6) * 96) * viewScale.value, 340 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (28 + (index - 6) * 96) * viewScale.value, (340 + (111 - (res
                      .height / res.width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (28 + (index - 6) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 340 * viewScale.value, ((res.width / res.height) * 111) * viewScale.value, 111 * viewScale.value);
                  }
                }
                if ((index + 1) / 3 > 3 && (index + 1) / 3 <= 4) {
                  await drawRect((28 + (index - 9) * 96) * viewScale.value, 455 * viewScale.value, 92 * viewScale.value, 111 * viewScale.value, 'rgba(255,255,255,0.34)');
                  let res = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[
                      index].image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (res.width >= res.height) {
                    await ctx.value.drawImage(res.path, (28 + (index - 9) * 96) * viewScale.value, (455 + (111 - (res
                      .height / res.width) * 92) / 2) * viewScale.value, 92 * viewScale.value, ((res.height / res.width) * 92) * viewScale.value);
                  } else {
                    await ctx.value.drawImage(res.path, (28 + (index - 9) * 96 + (92 - (res.width / res
                      .height) * 111) / 2) * viewScale.value, 455 * viewScale.value, (res.width / res.height) * 111 * viewScale.value, 111 * viewScale.value);
                  }
                }
              }
            } else {
              for (let index = 0; index < data.content.length; index++) {
                await drawRect(28 * viewScale.value, 95 * viewScale.value, 280 * viewScale.value, 470 * viewScale.value, '#FFFFFF');
                let res = await getImageInfo({
                  imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                    .image : `${nc_image.value}${data.content[index].image}`,
                });
                if (res.width >= res.height) {
                  await ctx.value.drawImage(res.path, 28 * viewScale.value, (95 + (470 - (res.height / res.width) * 280) /
                    2) * viewScale.value, 280 * viewScale.value, ((res.height / res.width) * 280) * viewScale.value);
                } else {
                  let scale = 280 / res.width;
                  await ctx.value.drawImage(res.path, 28 * viewScale.value,
                    (95 + (470 - res.height * scale) / 2) * viewScale.value, 280 * viewScale.value, res.height * scale * viewScale.value);
                }
              }
            }
          }
          if (data.desc == 'content' && data.sys_id == 3) {
            let position = 0;
            for (let index = 0; index < data.content.length; index++) {
              if (state.modeIndex == 0) {
                // 每一栏的边框
                await drawRoundRectPath(14 * viewScale.value, (74 + index * 175) * viewScale.value, 307 * viewScale.value, 170 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
                await drawLine(80 * viewScale.value, (74 + index * 175) * viewScale.value, 1 * viewScale.value, 135 * viewScale.value, '#000000');
                await drawLine(165 * viewScale.value, (74 + index * 175) * viewScale.value, 1 * viewScale.value, 135 * viewScale.value, '#000000');
                await drawLine(250 * viewScale.value, (74 + index * 175) * viewScale.value, 1 * viewScale.value, 170 * viewScale.value, '#000000');
                await drawLine(14 * viewScale.value, (209 + index * 175) * viewScale.value, 236 * viewScale.value, 1 * viewScale.value, '#000000');
                await drawLine(80 * viewScale.value, (94 + index * 175) * viewScale.value, 240 * viewScale.value, 1 * viewScale.value, '#000000');
                await drawLine(80 * viewScale.value, (114 + index * 175) * viewScale.value, 170 * viewScale.value, 1 * viewScale.value, '#000000');
                await drawLine(14 * viewScale.value, (168 + index * 175) * viewScale.value, 67 * viewScale.value, 1 * viewScale.value, '#000000');
                await drawLine(250 * viewScale.value, (126 + index * 175) * viewScale.value, 70 * viewScale.value, 1 * viewScale.value, '#000000');
                await drawLine(250 * viewScale.value, (145 + index * 175) * viewScale.value, 70 * viewScale.value, 1 * viewScale.value, '#000000');
                await drawLine(14 * viewScale.value, (188 + index * 175) * viewScale.value, 236 * viewScale.value, 1 * viewScale.value, '#000000');
                // 字辈
                await drawTextHeight(data.content[index].shi_cn, 36 * viewScale.value, (60 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                  15 * viewScale.value, '500', 'center');
                await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, 55 * viewScale.value, (60 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                  '#000000', 15 * viewScale.value, '500', 'center');
                // 姓名
                await drawTextLandscapeOrientation('姓名', 124 * viewScale.value, (90 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                // 配偶
                await drawTextLandscapeOrientation('配偶', 209 * viewScale.value, (90 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                // 父母
                await drawTextLandscapeOrientation('父母', 287 * viewScale.value, (90 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                  await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                    .content[index].parents[index1].name, 252 * viewScale.value, (107 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                  await drawTextLandscapeOrientation(data.content[index].parents[index1].page,
                    318 * viewScale.value, (107 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'right');
                }
                // 子女
                await drawTextLandscapeOrientation('子女', 287 * viewScale.value, (141 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 15 * viewScale.value,
                  '500', 'center');
                // 本人子女
                if (data.content[index].children.length <= 6) {
                  for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                    await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                      .content[index].children[index1].name, 252 * viewScale.value, (161.5 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                    await drawTextLandscapeOrientation(data
                      .content[index].children[index1].page, 318 * viewScale.value, (161.5 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'right');
                  }
                } else {
                  for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                    if (index1 < 5) {
                      await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                        .content[index].children[index1].name, 252 * viewScale.value, (161 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'left');
                      await drawTextLandscapeOrientation(data
                        .content[index].children[index1].page, 318 * viewScale.value, (161.5 + index * 175 + index1 * 15) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'right');
                    }
                  }
                  await drawTextLandscapeOrientation('...', 287 * viewScale.value, (161 + index * 175 + 5 * 15) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'center');
                }

                // 本人生日
                await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                  .birthday).format('YYYY年MM月DD日') : '', 127 * viewScale.value, (197 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                  8 * viewScale.value, '500', 'center');
                // 本人生日(农历)
                await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                  .lunar_birthday : '', 127 * viewScale.value, (206 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value, '500', 'center');
                // 本人姓名
                await drawTextLandscapeOrientation(data.content[index].name || '', 124 * viewScale.value, (110 + index * 175) * viewScale.value, 184 * viewScale.value,
                  150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'center');
                // 配偶姓名
                await drawTextLandscapeOrientation(data.content[index].qz_name || '', 209 * viewScale.value, (110 + index * 175) * viewScale.value,
                  184 * viewScale.value, 150 * viewScale.value, '#000000', 13 * viewScale.value, '500', 'center');
                // 配偶生日
                await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                    index].qz_birthday).format('YYYY年MM月DD日') : '', 208 * viewScale.value, (197 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                  '#000000', 8 * viewScale.value, '500', 'center');
                // 配偶生日(农历)
                await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                    index].qz_lunar_birthday : '', 208 * viewScale.value, (206 + index * 175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value,
                  '500', 'center');
                // 兄弟
                await drawTextLandscapeOrientation(data.content[index].brother_desc || '', 46 * viewScale.value, (182 + index *
                  175) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value, '500', 'center');
                // 排行
                await drawTextLandscapeOrientation(data.content[index].level_desc || '', 46 * viewScale.value, (202 + index * 175) * viewScale.value,
                  184 * viewScale.value, 150 * viewScale.value, '#000000', 8 * viewScale.value, '500', 'center');
                // 备注
                if (!!data.content[index].remark) {
                  // let text = data.content[index].remark.split('\n');
                  let nextStart = (220 + index * 175) * viewScale.value;
                  // text.forEach(item => {
                  nextStart = fillFeedText({
                    text: data.content[index].remark,
                    x: 18 * viewScale.value,
                    y: nextStart,
                    maxWidth: 225 * viewScale.value,
                    lineHeight: 10 * viewScale.value,
                    color: '#000000',
                    size: 8 * viewScale.value,
                    maxLineNumber: 3,
                    isMax: true,
                  });
                  // });
                }
                // 本人照片
                if (data.content[index].image) {
                  let imageInPerson = await getImageInfo({
                    imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                      .image : `${nc_image.value}${data.content[index].image}`,
                  });
                  if (imageInPerson.width > imageInPerson.height) {
                    let scale = imageInPerson.width / imageInPerson.height;
                    // drawRect(83, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, (83 + (80 - 68 / scale) / 2) * viewScale.value, (118 +
                      index * 175) * viewScale.value, 68 / scale * viewScale.value, 68 * viewScale.value);
                  } else {
                    let scale = imageInPerson.height / imageInPerson.width;
                    // drawRect(83, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, (83 + (80 - 68 / scale) / 2) * viewScale.value, (118 +
                      index * 175) * viewScale.value, 68 / scale * viewScale.value, 68 * viewScale.value);
                  }
                }
                // 配偶照片
                if (data.content[index].qz_image) {
                  let imageInPerson = await getImageInfo({
                    imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                      index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                  });
                  console.log(imageInPerson);
                  if (imageInPerson.width > imageInPerson.height) {
                    let scale = imageInPerson.width / imageInPerson.height;
                    // drawRect(168, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, 168 * viewScale.value, (118 + (68 - 80 / scale) / 2 +
                      index * 175) * viewScale.value, 80 * viewScale.value, (80 / scale) * viewScale.value);
                  } else {
                    let scale = imageInPerson.height / imageInPerson.width;
                    // drawRect(168, 118 + index * 175, 80, 68);
                    await ctx.value.drawImage(imageInPerson.path, (168 + (89 - 68 / scale) / 2) * viewScale.value, (118 +
                      index * 175) * viewScale.value, 68 / scale * viewScale.value, 68 * viewScale.value);
                  }
                }
              } else {
                if (index % 2 == 0) {
                  await drawRoundRectPath(14 * viewScale.value, (74 + position * 87) * viewScale.value, 307 * 0.49 * viewScale.value, 84 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
                  await drawLine(40 * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#000000');
                  await drawLine(82.5 * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#000000');
                  await drawLine(125 * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 85 * viewScale.value, '#000000');
                  await drawLine(40 * viewScale.value, (84 + position * 87) * viewScale.value, 124 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine(14 * viewScale.value, (140.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine(40 * viewScale.value, (94 + position * 87) * viewScale.value, 86 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine(14 * viewScale.value, (130.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine(14 * viewScale.value, (120.5 + position * 87) * viewScale.value, 27 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine(126 * viewScale.value, (102.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine(126 * viewScale.value, (112.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#000000');

                  // 字辈
                  await drawTextHeight(data.content[index].shi_cn, 23 * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    6 * viewScale.value, '500', 'center');
                  await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, 30 * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 6 * viewScale.value, '500', 'center');
                  // 姓名
                  await drawTextLandscapeOrientation('姓名', 62 * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 配偶
                  await drawTextLandscapeOrientation('配偶', 105 * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  await drawTextLandscapeOrientation('父母', 145 * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                    console.log(data.content[index].parents[index1]);
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                      .content[index].parents[index1].name, 127 * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].page, 162 * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                  }
                  // 子女
                  await drawTextLandscapeOrientation('子女', 145 * viewScale.value, (110 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');

                  // 本人子女
                  if (data.content[index].children.length <= 6) {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                        .content[index].children[index1].name, 127 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                      await drawTextLandscapeOrientation(data.content[index].children[index1].page, 162 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                    }
                  } else {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      if (index1 < 5) {
                        await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                          .content[index].children[index1].name, 127 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                        await drawTextLandscapeOrientation(data.content[index].children[index1].page, 162 * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                      }
                    }
                    await drawTextLandscapeOrientation('...', 144 * viewScale.value, (119.5 + position * 87 + 5 * 7) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  }

                  // 本人生日
                  await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                    .birthday).format('YYYY年MM月DD日') : '', 62 * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    4 * viewScale.value, '500', 'center');

                  // 本人生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                    .lunar_birthday : '', 62 * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 本人姓名
                  await drawTextLandscapeOrientation(data.content[index].name || '', 62 * viewScale.value, (92 + position * 87) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶姓名
                  await drawTextLandscapeOrientation(data.content[index].qz_name || '', 105 * viewScale.value, (92 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶生日
                  await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                      index].qz_birthday).format('YYYY年MM月DD日') : '', 105 * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 4 * viewScale.value, '500', 'center');
                  // 配偶生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                      index].qz_lunar_birthday : '', 105 * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value,
                    '500', 'center');
                  // 兄弟
                  await drawTextLandscapeOrientation(data.content[index].brother_desc || '', 27 * viewScale.value, (127.5 + position *
                    87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 排行
                  await drawTextLandscapeOrientation(data.content[index].level_desc || '', 27 * viewScale.value, (137.5 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 备注
                  if (!!data.content[index].remark) {
                    // let text = data.content[index].remark.split('\n');
                    let nextStart = (145.5 + position * 87) * viewScale.value;
                    // text.forEach(item => {
                    nextStart = fillFeedText({
                      text: data.content[index].remark,
                      x: 16 * viewScale.value,
                      y: nextStart,
                      maxWidth: 107 * viewScale.value,
                      lineHeight: 5 * viewScale.value,
                      color: '#000000',
                      size: 4 * viewScale.value,
                      maxLineNumber: 3,
                      isMax: true,
                    });
                    // });
                  }
                  // 本人照片
                  if (data.content[index].image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                        .image : `${nc_image.value}${data.content[index].image}`,
                    });
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(41.8 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, 41.8 * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(83, 118 + position * 87, 80 * viewScale.value, 68 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, (41.8 + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }
                  // 配偶照片
                  if (data.content[index].qz_image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                        index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                    });
                    console.log(imageInPerson);
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(84.2 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, 84.2 * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(168, 118 + index * 175, 80, 68);
                      await ctx.value.drawImage(imageInPerson.path, (84.2 + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }
                }
                else {
                  await drawRoundRectPath((18 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 307 * 0.49 * viewScale.value, 84 * viewScale.value, 2 * viewScale.value, '#000000', 'transparent');
                  await drawLine((44 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#000000');
                  await drawLine((86.5 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 67.5 * viewScale.value, '#000000');
                  await drawLine((129 + 307 * 0.49) * viewScale.value, (74 + position * 87) * viewScale.value, 1 * viewScale.value, 85 * viewScale.value, '#000000');
                  await drawLine((44 + 307 * 0.49) * viewScale.value, (84 + position * 87) * viewScale.value, 124 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine((18 + 307 * 0.49) * viewScale.value, (140.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine((44 + 307 * 0.49) * viewScale.value, (94 + position * 87) * viewScale.value, 86 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine((18 + 307 * 0.49) * viewScale.value, (130.5 + position * 87) * viewScale.value, 112 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine((18 + 307 * 0.49) * viewScale.value, (120.5 + position * 87) * viewScale.value, 27 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine((130 + 307 * 0.49) * viewScale.value, (102.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#000000');
                  await drawLine((130 + 307 * 0.49) * viewScale.value, (112.5 + position * 87) * viewScale.value, 38 * viewScale.value, 1 * viewScale.value, '#000000');

                  // 字辈
                  await drawTextHeight(data.content[index].shi_cn, (27 + 307 * 0.49) * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    6 * viewScale.value, '500', 'center');
                  await drawTextHeight(`︵${data.content[index].generation || '辈'}︶`, (34 + 307 * 0.49) * viewScale.value, (26 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 6 * viewScale.value, '500', 'center');
                  // 姓名
                  await drawTextLandscapeOrientation('姓名', (66 + 307 * 0.49) * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 配偶
                  await drawTextLandscapeOrientation('配偶', (109 + 307 * 0.49) * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  await drawTextLandscapeOrientation('父母', (149 + 307 * 0.49) * viewScale.value, (82 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 父母
                  for (let index1 = 0; index1 < data.content[index].parents.length; index1++) {
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].surname + data
                      .content[index].parents[index1].name, (131 + 307 * 0.49) * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                    await drawTextLandscapeOrientation(data.content[index].parents[index1].page,
                      (166 + 307 * 0.49) * viewScale.value, (92 + position * 87 + index1 * 8) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                  }
                  // 子女
                  await drawTextLandscapeOrientation('子女', (149 + 307 * 0.49) * viewScale.value, (110 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#696969', 6 * viewScale.value,
                    '500', 'center');
                  // 本人子女
                  if (data.content[index].children.length <= 6) {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                        .content[index].children[index1].name, (131 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                      await drawTextLandscapeOrientation(data.content[index].children[index1].page, (166 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                        150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                    }
                  } else {
                    for (let index1 = 0; index1 < data.content[index].children.length; index1++) {
                      if (index1 < 5) {
                        await drawTextLandscapeOrientation(data.content[index].children[index1].surname + data
                          .content[index].children[index1].name, (131 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'left');
                        await drawTextLandscapeOrientation(data.content[index].children[index1].page, (166 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + index1 * 7) * viewScale.value, 184 * viewScale.value,
                          150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'right');
                      }
                    }
                    await drawTextLandscapeOrientation('...', (149 + 307 * 0.49) * viewScale.value, (119.5 + position * 87 + 5 * 7) * viewScale.value, 184 * viewScale.value,
                      150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  }
                  // 本人生日
                  await drawTextLandscapeOrientation(!!data.content[index].birthday ? dayjs(data.content[index]
                    .birthday).format('YYYY年MM月DD日') : '', (66 + 307 * 0.49) * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000',
                    4 * viewScale.value, '500', 'center');
                  // 本人生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].lunar_birthday ? data.content[index]
                    .lunar_birthday : '', (66 + 307 * 0.49) * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 本人姓名
                  await drawTextLandscapeOrientation(data.content[index].name || '', (66 + 307 * 0.49) * viewScale.value, (92 + position * 87) * viewScale.value, 184 * viewScale.value,
                    150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶姓名
                  await drawTextLandscapeOrientation(data.content[index].qz_name || '', (109 + 307 * 0.49) * viewScale.value, (92 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 6 * viewScale.value, '500', 'center');
                  // 配偶生日
                  await drawTextLandscapeOrientation(!!data.content[index].qz_birthday ? dayjs(data.content[
                      index].qz_birthday).format('YYYY年MM月DD日') : '', (109 + 307 * 0.49) * viewScale.value, (135 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value,
                    '#000000', 4 * viewScale.value, '500', 'center');
                  // 配偶生日(农历)
                  await drawTextLandscapeOrientation(!!data.content[index].qz_lunar_birthday ? data.content[
                      index].qz_lunar_birthday : '', (109 + 307 * 0.49) * viewScale.value, (139 + position * 87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value,
                    '500', 'center');
                  // 兄弟
                  await drawTextLandscapeOrientation(data.content[index].brother_desc || '', (31 + 307 * 0.49) * viewScale.value, (127.5 + position *
                    87) * viewScale.value, 184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 排行
                  await drawTextLandscapeOrientation(data.content[index].level_desc || '', (31 + 307 * 0.49) * viewScale.value, (137.5 + position * 87) * viewScale.value,
                    184 * viewScale.value, 150 * viewScale.value, '#000000', 4 * viewScale.value, '500', 'center');
                  // 备注
                  if (!!data.content[index].remark) {
                    // let text = data.content[index].remark.split('\n');
                    let nextStart = (145.5 + position * 87) * viewScale.value;
                    // text.forEach(item => {
                    nextStart = fillFeedText({
                      text: data.content[index].remark,
                      x: (20 + 307 * 0.49) * viewScale.value,
                      y: nextStart,
                      maxWidth: 107 * viewScale.value,
                      lineHeight: 5 * viewScale.value,
                      color: '#000000',
                      size: 4 * viewScale.value,
                      maxLineNumber: 3,
                      isMax: true,
                    });
                    // });
                  }

                  // 本人照片
                  if (data.content[index].image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].image.indexOf('http') != -1 ? data.content[index]
                        .image : `${nc_image.value}${data.content[index].image}`,
                    });
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(41.8 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, (45.8 + 307 * 0.49) * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(83, 118 + position * 87, 80 * viewScale.value, 68 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, ((45.8 + 307 * 0.49) + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }

                  // 配偶照片
                  if (data.content[index].qz_image) {
                    let imageInPerson = await getImageInfo({
                      imgSrc: data.content[index].qz_image.indexOf('http') != -1 ? data.content[
                        index].qz_image : `${nc_image.value}${data.content[index].qz_image}`,
                    });
                    console.log(imageInPerson);
                    if (imageInPerson.width > imageInPerson.height) {
                      let scale = imageInPerson.width / imageInPerson.height;
                      // drawRect(84.2 * viewScale.value, (96 + position * 87) * viewScale.value, 40 * viewScale.value, 33.5 * viewScale.value);
                      await ctx.value.drawImage(imageInPerson.path, (88.2 + 307 * 0.49) * viewScale.value, (96 + (33.5 - 40 / scale) / 2 +
                        position * 87) * viewScale.value, 40 * viewScale.value, 40 / scale * viewScale.value);
                    } else {
                      let scale = imageInPerson.height / imageInPerson.width;
                      // drawRect(168, 118 + index * 175, 80, 68);
                      await ctx.value.drawImage(imageInPerson.path, ((88.2 + 307 * 0.49) + (40 - 33.5 / scale) / 2) * viewScale.value, (96 +
                        position * 87) * viewScale.value, 33.5 / scale * viewScale.value, 33.5 * viewScale.value);
                    }
                  }
                  position++;
                }
              }
            }
          }
          if (data.desc == 'content' && data.sys_id != 2 && data.sys_id != 3) {
            // 分割字符转为数组
            let text = data.content.split('\n');
            let nextStart = 125 * viewScale.value;
            text.forEach(item => {
              nextStart = fillFeedText({
                text: item,
                x: 35 * viewScale.value,
                y: nextStart,
                maxWidth: 275 * viewScale.value,
                lineHeight: 23 * viewScale.value,
                color: '#000000',
                size: 13 * viewScale.value,
                isMax: false,
              });
            });
          }
          ctx.value.draw(true, async () => {
            let {
              fullurl,
            } = await saveImage();
            // page.imageList.push(fullurl);
            await createPdf(fullurl);
            await drawImage(index + 1);
          });
        }
      }else{
        drawPdfFinish()
      }
    }
  }

  function setFontSize(title) {
    if (title.length <= 4) {
      return 15 * viewScale.value;
    }
    return 10 * viewScale.value;
  }

  // 绘制背景
  async function drawBackground() {
    ctx.value.setFillStyle('#FFFFFF');
    ctx.value.fillRect(0, 0, 375 * viewScale.value, 667 * viewScale.value);
  }

  // 绘制线条
  async function drawLine(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.fillRect(x, y, width, height);
  }

  // 绘制矩形
  async function drawRect(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.fillRect(x, y, width, height);
  }

  // 绘制三角形
  async function drawTriangle(x, y, width, height, color) {
    ctx.value.setFillStyle(color);
    ctx.value.beginPath();
    ctx.value.moveTo(x, y);
    ctx.value.lineTo(x + width, y);
    ctx.value.lineTo(x, y + height);
    ctx.value.closePath();
    ctx.value.fill();
  }

  // 绘制图片
  async function getImageInfo({ imgSrc }) {
    return new Promise((resolve, errs) => {
      uni.getImageInfo({
        src: imgSrc,
        success: function(image) {
          resolve(image);
        },
        fail(err) {
          errs(err);
        },
      });
    });
  }

  // 绘制矩形带有线条
  async function drawRoundRectPath(x, y, width, height, borderWidth, borderColor, fillColor) {
    ctx.value.lineWidth = borderWidth;
    ctx.value.fillStyle = fillColor;
    ctx.value.strokeStyle = borderColor;
    ctx.value.fillRect(x, y, width, height);
    ctx.value.strokeRect(x, y, width, height);
  }

  // 绘制文字竖向（正序）
  async function drawText(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, y + i * (Number(fontSize) + 2));
    }
  }

  // 绘制文字横向（正序）
  async function drawTextLandscapeOrientation(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    ctx.value.fillText(text, x, y);
  }

  // 绘制文字竖向（倒序）
  async function drawTextVertical(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    arr.reverse();
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, y - i * (Number(fontSize) + 2));
    }
  }

  // 绘制文字竖向（中间）
  async function drawTextCenter(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    let arr = text.split('');
    if (arr.length == 1) {
      await drawTextItem(arr[0], x, y + (256 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 2) {
      await drawTextItem(arr[0], x, y + (186 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (326 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 3) {
      await drawTextItem(arr[0], x, y + (126 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (256 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (386 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 4) {
      await drawTextItem(arr[0], x, y + (46 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (186 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (326 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (466 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 5) {
      await drawTextItem(arr[0], x, y + (6 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (136 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (256 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (386 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (526 / 2) * viewScale.value, color, fontSize, fontWeight, textAlign);
    } else if (arr.length == 6) {
      await drawTextItem(arr[0], x, y + (6 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (106 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (206 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (306 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (406 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (506 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 7) {
      await drawTextItem(arr[0], x, y + (6 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (86 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (166 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (246 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (326 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (406 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (486 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 8) {
      await drawTextItem(arr[0], x, y + (0 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (70 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (140 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (210 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (280 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (350 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (420 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (490 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 9) {
      await drawTextItem(arr[0], x, y + (0 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (65 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (130 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (195 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (260 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (325 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (390 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (455 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (520 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 10) {
      await drawTextItem(arr[0], x, y + (-20 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (40 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (100 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (160 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (220 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (280 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (340 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (400 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (460 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (520 / 2) * viewScale.value, color, fontSize / 2, fontWeight, textAlign);
    } else if (arr.length == 11) {
      await drawTextItem(arr[0], x, y + (-20 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (30 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (80 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (130 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (180 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (230 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (280 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (330 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (380 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (430 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (480 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
    } else if (arr.length == 12) {
      await drawTextItem(arr[0], x, y + (-30 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (20 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (70 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (120 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (170 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (220 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (270 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (320 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (370 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (420 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (470 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (520 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
    } else if (arr.length == 13) {
      await drawTextItem(arr[0], x, y + (-50 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (-2 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (46 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (94 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (142 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (190 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (238 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (286 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (334 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (382 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (430 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (478 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[12], x, y + (526 / 2) * viewScale.value, color, 22 * viewScale.value, fontWeight, textAlign);
    } else if (arr.length == 14) {
      await drawTextItem(arr[0], x, y + (-52 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[1], x, y + (-8 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[2], x, y + (36 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[3], x, y + (80 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[4], x, y + (124 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[5], x, y + (168 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[6], x, y + (212 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[7], x, y + (256 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[8], x, y + (300 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[9], x, y + (344 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[10], x, y + (388 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[11], x, y + (432 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[12], x, y + (476 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
      await drawTextItem(arr[13], x, y + (520 / 2) * viewScale.value, color, 20 * viewScale.value, fontWeight, textAlign);
    }
  }

  // 绘制每一项的文字
  async function drawTextItem(text, x, y, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    ctx.value.fillText(text, x, y);
  }

  // 绘制横向虚线
  async function drawHorizontalLine(x, y, width, height, color, lineWidth, dashLength, dashGap) {
    ctx.value.save();
    ctx.value.setLineDash([dashLength, dashGap], 5);
    ctx.value.setLineWidth(lineWidth);
    ctx.value.setStrokeStyle(color);
    ctx.value.strokeRect(x, y, width, height);
    ctx.value.restore();
  }

  // 绘制矩形圆角
  async function drawRectangle(x, y, width, height, color, radius) {
    ctx.value.save();
    ctx.value.setFillStyle(color);
    // 开始绘制圆角矩形
    ctx.value.beginPath();
    // 左上角圆弧
    ctx.value.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
    // 右上角圆弧
    ctx.value.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
    // 右下角圆弧
    ctx.value.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
    // 左下角圆弧
    ctx.value.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
    // 闭合路径
    ctx.value.closePath();
    // 填充颜色
    ctx.value.fill();
    // 绘制边框
    ctx.value.stroke();
    ctx.value.restore();
  }

  // 数组转换文字
  function number2Chinese(str) {
    let chinese = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    let numStr = str.replace(/[^0-9]+/g, '');
    let year = chinese[numStr[0]] + chinese[numStr[1]] + chinese[numStr[2]] + chinese[numStr[3]];
    let month = numStr[4] === '0' ? chinese[numStr[5]] : chinese[10] + chinese[numStr[5]];
    let day = '';
    if (numStr[6] === '0') {
      day = chinese[numStr[7]];
    } else if (numStr[6] === '1') {
      if (numStr[7] === '0') {
        day = chinese[10];
      } else {
        day = chinese[10] + chinese[numStr[7]];
      }
    } else if (numStr[6] === '2' || numStr[6] === '3') {
      if (numStr[7] === '0') {
        day = chinese[numStr[6]] + chinese[10];
      } else {
        day = chinese[numStr[6]] + chinese[10] + chinese[numStr[7]];
      }
    }
    return year + '年' + month + '月' + day + '日';
  }

  // 获取文本的高度并竖向垂直居中
  async function drawTextHeight(text, x, y, width, height, color, fontSize, fontWeight, textAlign) {
    ctx.value.font = `${fontWeight} ${fontSize}px PingFang SC`;
    ctx.value.setTextAlign(textAlign);
    ctx.value.setFillStyle(color);
    let arr = text.split('');
    let intermediateLine = height / 2 - (arr.length * fontSize / 2);
    for (let i = 0; i < arr.length; i++) {
      ctx.value.fillText(arr[i], x, intermediateLine + y + i * (Number(fontSize) + 2));
    }
  }

  // 保存图片
  async function saveImage() {
    return new Promise(async (resolve, reject) => {
      setTimeout(async () => {
        await uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          width: 375 * viewScale.value,
          height: 667 * viewScale.value,
          destWidth: 375 * 4,
          destHeight: 667 * 4,
          success: async res => {
            // #ifdef H5
            resolve({
              fullurl: res.tempFilePath,
            });
            // #endif
            // #ifdef APP-PLUS
            let base64 = await pathToBase64(res.tempFilePath);
            resolve({
              fullurl: base64,
            });
            // #endif
            // #ifndef H5
            // uni.uploadFile({
            //   url: `${baseUrl}/api/common/uploadFile`,
            //   filePath: res.tempFilePath,
            //   fileType: 'image',
            //   name: 'pics',
            //   formData: {
            //     'file': 'pics',
            //   },
            //   header: {
            //     // #ifdef MP
            //     'Content-Type': 'multipart/form-data',
            //     // #endif
            //     ['token']: uni.getStorageSync('token'),
            //     'file': res.tempFilePath,
            //   },
            //   success: async (res) => {
            //     resolve(JSON.parse(res.data).data);
            //   },
            // });
            // #endif
          },
        });
      }, 100);
    });
  }



  // 绘制完成上传图片下载链接
  async function createPdf(image) {
    uni.hideLoading();
    uni.showLoading({
      title: '正在生成中...',
      mask: true,
    });
    // #ifdef H5
    // for (let i = 0; i < page.imageList.length; i++) {
    //   const url = page.imageList[i];
      // PDF.addImage(url, 'png', 1, 1, 375, 667);
      PDF.value.addImage(image, 'png', 1.111, -2.7075, 20.003, 35.578, '', 'FAST');
      PDF.value.addPage([22.225, 30.163], 'portrait');
    // }
    // #endif

    // #ifdef MP-WEIXIN
    sheep.$helper.toast('请前往H5端进行导出');
    // #endif

    // #ifdef APP-PLUS
    uni.$emit('managePdf', page.imageList);
    // #endif
  }
  // 绘制PDF完毕
  // #ifdef H5
  async function drawPdfFinish() {
    // 删除最后一页留白
    const targetPage = PDF.value.internal.getNumberOfPages();
    PDF.value.deletePage(targetPage);
    PDF.value.deletePage(1);
    PDF.value.save('PDF存档.pdf');
    uni.hideLoading();
  }
  // #endif

  // 填充自动换行的文本
  function fillFeedText({ text, x, y, maxWidth, lineHeight, color, size, maxLineNumber, isMax }) {
    ctx.value.save();
    // 文本配置
    ctx.value.setFontSize(size);
    ctx.value.setFillStyle(color);
    ctx.value.lineWidth = 0.8; // 边框宽度

    // 计算文本换行宽高，换行逻辑
    const words = text.split('');
    let line = '';
    const lines = [];
    for (let i = 0; i < words.length; i++) {
      const word = words[i];
      const testLine = line + word;
      const metrics = ctx.value.measureText(testLine);
      if (metrics.width > maxWidth && i > 0) {
        lines.push(line);
        line = word;
      } else {
        line = testLine;
      }
    }
    ctx.value.setTextAlign('left');

    // 填充文本
    lines.push(line);
    let nextStart = 0;
    lines.forEach((line, index) => {
      if (isMax) {
        if (index <= maxLineNumber - 1) {
          if (index == maxLineNumber - 1) {
            let text = line.slice(0, -3) + '...';
            ctx.value.fillText(text, x, y + ((index++) * lineHeight), maxWidth);
            return nextStart = y + ((index++) * lineHeight);
          }
          ctx.value.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
          nextStart = y + ((index++) * lineHeight);
        }
      } else {
        ctx.value.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
        nextStart = y + ((index++) * lineHeight);
      }

    });
    ctx.value.restore();

    return nextStart;
  }
</script>


<style scoped lang="scss">

</style>
